<template>
  <el-form label-width="80px" label-position="left">
    <el-form-item label="市场价格">
      <el-input  
        style="max-width: 16%; min-width: 250px;" 
        type="number" 
        :value="oprice" 
        @input="vModel('oprice', $event)">
          <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="销售价格">
      <el-input  
        style="max-width: 16%; min-width: 250px;" 
        type="number" 
        :value="pprice" 
        @input="vModel('pprice', $event)">
          <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="成本价格">
      <el-input 
        style="max-width: 16%; min-width: 250px;" 
        type="number" 
        :value="cprice" 
        @input="vModel('cprice', $event)">
          <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="商品重量">
      <el-input 
        style="max-width: 16%; min-width: 250px;" 
        type="number" 
        :value="weight" 
        @input="vModel('weight', $event)">
          <template slot="append">公斤</template>
      </el-input>
    </el-form-item>
    <el-form-item label="商品体积">
      <el-input 
        style="max-width: 16%; min-width: 250px;" 
        type="number" 
        :value="volume" 
        @input="vModel('volume', $event)">
        <template slot="append">立方米</template>
      </el-input>
    </el-form-item>
  </el-form> 
</template>

<script>
import {mapState, mapMutations} from 'vuex'
const goods_create_state = ['oprice', 'pprice', 'cprice', 'weight', 'volume']
export default {
  name:'SingleAttrsForm',
  data() {
    return {

    }
  },
  computed: {
    ...mapState('goods_create', goods_create_state)
  },
  methods: {
    ...mapMutations('goods_create', ['vModelState']),
    // v-model 对于 vuex中改数据的拆分方法
    vModel(key, val){
      this.vModelState({key, val})
    } 
  }
}
</script>

<style scoped>

</style>